<template>
  <view class="page-container">
    <!-- 表单头部 -->
    <view class="form-header-card">
      <view class="header-bottom">
        <view class="apply-date">申请日期：{{ form.applyDate }}</view>
        <view class="form-title">到货验收单</view>
      </view>
    </view>

    <!-- 表单内容 -->
    <wd-card :loading=loading class="form-content-card">
      <wd-form ref="formRef" :model="form" :rules="rules">
        <wd-row>
          <wd-col :span="12">
            <wd-cell-group>
              <wd-input
                v-model="form.applicant"
                label="申请人"
                label-width="40%"
                disabled
                placeholder="请输入申请人"
                prop="applicant"
              />
            </wd-cell-group>
          </wd-col>
          <wd-col :span="12">
            <wd-cell-group>
              <wd-input
                v-model="form.employeeid"
                label="工号"
                disabled
                placeholder="请输入工号"
                prop="employeeid"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-input
                v-model="form.contractname"
                label="合同名称"
                :disabled="routeParams.type !== 'add'"
                placeholder="请输入合同名称"
                prop="contractname"
              />
            </wd-cell-group>
          </wd-col>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-input
                v-model="form.contractnumber"
                label="合同号"
                :disabled="routeParams.type !== 'add'"
                placeholder="请输入合同号"
                prop="contractnumber"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-textarea
                auto-height
                v-model="form.suppliername"
                label="供应商名称"
                :disabled="routeParams.type !== 'add'"
                placeholder="请输入供应商名称"
                prop="suppliername"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-calendar
                label="到货验收日期"
                v-model="pickdate"
                :disabled="routeParams.type !== 'add'"
                center
                @confirm="changeDate"
                type="date"
                :show-confirm="false"
                prop="deliveryDate"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-textarea
                auto-height
                v-model="form.warranty"
                label="质保要求"
                :disabled="routeParams.type !== 'add'"
                placeholder="请输入质保要求"
                prop="warranty"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <view class="section-title">验收明细</view>
        <lh-table :disabled="routeParams.type !== 'add'" :rows="state.rows" :columns="state.columns" @tapToolbar="tapToolbar" :showToolbar='true' @tapOper="tapOper" :showOper="true"
        >
        </lh-table>
        <wd-row>
          <wd-col :span="24" style="margin-top: 20px">
            <wd-cell-group>
              <wd-radio-group
                v-model="form.acceptanceOpinion"
                :disabled="routeParams.type !== 'add'"
                prop="acceptanceOpinion"
              >
                <wd-cell title="验收意见">
                  <wd-radio value="合格">合格</wd-radio>
                  <wd-radio value="不合格">不合格</wd-radio>
                </wd-cell>
              </wd-radio-group>
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-textarea
                auto-height
                v-model="form.conclusion"
                label="结论"
                :disabled="routeParams.type !== 'add'"
                prop="conclusion"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <view class="section-title">审批意见</view>
        <!-- <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-textarea
                auto-height
                v-model="form.acceptanceEngineer"
                label="验收工程师"
                disabled
              />
            </wd-cell-group>
          </wd-col>
        </wd-row> -->
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-textarea
                auto-height
                v-model="form.designManager"
                label="设计部经理"
                disabled
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col :span="24">
            <wd-cell-group>
              <wd-textarea
                auto-height
                v-model="form.viceManager"
                label="副总"
                disabled
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
      </wd-form>
    </wd-card>
    <wd-popup
      v-model="tableEditShow"
      position="bottom"
      class="popup-container"
      :safe-area-inset-bottom="false"
      :z-index="10000"
    >
      <view class="popup-content">
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.materialName"
                label="物料名称"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.specModel"
                label="规格型号"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.unit"
                label="单位"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.quantity"
                label="数量"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.brandTech"
                label="品牌"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.accessory"
                label="随机备件"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-select-picker
                multiple
                v-model="tableEdit.confirmItems"
                :columns="confirmItems"
                label="确认项"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.materialDirection"
                label="物料去向"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
        <wd-row>
          <wd-col span="24">
            <wd-cell-group>
              <wd-input
                v-model="tableEdit.remark"
                label="备注"
              />
            </wd-cell-group>
          </wd-col>
        </wd-row>
      </view>
      <view class="popup-footer">
          <wd-button type="default" size="large" @tap="tableEditShow = false" class="cancel-btn">取消</wd-button>
          <wd-button type="primary" size="large" @tap="confirmEdit" class="submit-btn">确认</wd-button>
      </view>
    </wd-popup>
    <wd-popup
      v-if="routeParams && routeParams.type === 'approval'"
      v-model="show"
      position="bottom"
      class="popup-container"
      :safe-area-inset-bottom="false"
      :z-index="10000"
      :loading="approvalloading"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">评审意见</text>
          <wd-icon name="close" size="20px" @tap="show = false" class="close-icon"></wd-icon>
        </view>
        <view class="popup-body">
          <wd-textarea
            v-model="taskForm.message"
            placeholder="请输入评审意见..."
            :rows="4"
            :maxlength="200"
            show-count
            class="opinion-input"
          />
        </view>
        <view class="popup-footer">
          <wd-button type="default" size="large" @tap="show = false" class="cancel-btn">取消</wd-button>
          <wd-button type="primary" size="large" @tap="confirm" class="submit-btn">提交</wd-button>
        </view>
      </view>
    </wd-popup>
    <wd-popup
      v-if="routeParams && routeParams.type === 'approval'"
      v-model="backshow"
      position="bottom"
      class="popup-container"
      :safe-area-inset-bottom="false"
      :z-index="10000"
      :loading="backloading"
    >
      <view  class="popup-content">
        <view class="popup-body">
          <wd-textarea
            v-model="backForm.message"
            placeholder="请输入退回原因..."
            :rows="4"
            :maxlength="200"
            show-count
            class="opinion-input"
          />
        </view>
        <wd-select-picker label="驳回节点" v-model="backForm.nodeCode" :columns="columns" type="radio" @confirm="handleBackConfirm"></wd-select-picker>
        <view class="popup-footer">
          <wd-button type="default" size="large" @tap="backshow = false" class="cancel-btn">取消</wd-button>
          <wd-button type="primary" size="large" @tap="backConfirm" class="submit-btn">退回</wd-button>
        </view>
      </view>
    </wd-popup>

    <!-- 操作按钮 -->
    <view v-if="routeParams && routeParams.type !== 'add'" class="action-buttons" :class="{ 'hidden': show }">
      <view v-if="routeParams && routeParams.type === 'approval'" class="custom-button submit-btn" @tap="backFlow">
        <view class="button-content">
          <text class="button-icon">X</text>
          <text class="button-text">驳回</text>
        </view>
      </view>
      <view v-if="routeParams && routeParams.type === 'approval'" class="custom-button approval-btn" @tap="addSign">
        <view class="button-content">
          <text class="button-icon">+</text>
          <text class="button-text">加签</text>
        </view>
      </view>
      <view v-if="routeParams && routeParams.type === 'approval'" class="custom-button approval-btn" @tap="handleApproval">
        <view class="button-content">
          <text class="button-icon">✓</text>
          <text class="button-text">审批</text>
        </view>
      </view>
      <view v-if="routeParams && routeParams.type === 'finish'" class="custom-button approval-btn" @tap="handleCancel">
        <view class="button-content">
          <text class="button-icon">X</text>
          <text class="button-text">撤销</text>
        </view>
      </view>
    </view>
    <view v-if="routeParams.type === 'add'">
      <view class="approval-record-buttons" @tap="submitForm">
        <text class="button-text-top">提交</text>
      </view>
    </view>
    <!-- 审批记录按钮 -->
    <view v-if="routeParams && routeParams.type !== 'add'" class="approval-record-button" @click="handleApprovalRecordClick">
      <text class="button-text-top">审批</text>
      <text class="button-text-bottom">记录</text>
    </view>

    <UserSelectSingle
      :user-list="userListofcode2"
      ref="userselectsingleref"
      v-model:visable="userselectsinglevisable"
      @confirm-call-back="userSelectCallBack"
      @cancel="handleUserSelectCancel"
    />

    <Userselect ref="userselectref" @update:visable="updateUserSelectVisable" v-model:visable="userselectvisable" :taskId="routeParams.taskId" />
  </view>
</template>

<script setup name="到货验收单" lang="ts">
import type { ArrivalAcceptanceForm, ArrivalAcceptanceVO, DaohuoMaterial } from '@/pagesA/api/workflow/arrivalAcceptance/types';
import { addArrivalAcceptance, getArrivalAcceptance, updateArrivalAcceptance } from '@/pagesA/api/workflow/arrivalAcceptance';
import { useUserStore } from '@/store/modules/user';
import { ref, onMounted, reactive, toRefs, nextTick } from 'vue';
import { backProcess, completeTask, getBackTaskNode, getTask, startWorkFlow } from '@/pagesA/api/workflow/task';
import { onLoad } from '@dcloudio/uni-app';
import type { FlowTaskVO } from '@/pagesA/api/workflow/task/types';
import type { AxiosResponse } from 'axios';
import type { StartProcessBo } from '@/pagesA/api/workflow/workflowCommon/types';
import { getCurrentDateCN } from '@/utils/ruoyi';
import Userselect from '@/pagesA/components/Userselect/index.vue';
import UserSelectSingle from '@/pagesA/components/UserSelectSingle/index.vue';
import { cancelProcessApproval } from '@/pagesA/api/workflow/instance';
import type { FormInstance } from 'wot-design-uni/components/wd-form/types';
const handleCancel = async () => { 
  const data = {
    businessId: routeParams.value.id,
    message: '撤销流程！',
    historyTaskId: routeParams.value.historyTaskId
  };
  await cancelProcessApproval(data).finally(() => (loading.value = false));
  uni.navigateBack();
};

const userselectref = ref<InstanceType<typeof Userselect>>();
const userselectsingleref = ref<InstanceType<typeof UserSelectSingle>>();
// 用于等待用户选择完成的 Promise
let userSelectResolve: ((value: any) => void) | null = null;

const userSelectCallBack = (data: any) => {
  taskForm.value.assigneeMap[2] = data.userId;
  userselectsinglevisable.value = false; // 关闭弹窗

  // 如果有等待的 Promise，则解析它
  if (userSelectResolve) {
    userSelectResolve(data);
    userSelectResolve = null;
  }
};

// 处理用户取消选择
const handleUserSelectCancel = () => {
  userselectsinglevisable.value = false;

  // 如果有等待的 Promise，则拒绝它
  if (userSelectResolve) {
    userSelectResolve(null); // 或者可以用 reject
    userSelectResolve = null;
  }
};

// 显示用户选择弹窗并等待选择完成
const showUserSelectAndWait = (): Promise<any> => {
  return new Promise((resolve) => {
    userSelectResolve = resolve;
    userselectsinglevisable.value = true;
  });
};
const userselectvisable = ref(false);
const userselectsinglevisable = ref(false);

const userListofcode2 = ref([
        ]);
const updateUserSelectVisable = (value: boolean) => {
  userselectvisable.value = value;
}; // 控制弹窗的显示隐藏
const addSign = () => {
  userselectvisable.value = true;
};

// 审批记录按钮点击处理
const handleApprovalRecordClick = () => {
  if (routeParams.value.id) {
    uni.navigateTo({
      url: `/pagesA/workflow/process/process?businessId=${routeParams.value.id}`
    });
  } else {
    uni.showToast({
      title: '暂无审批记录',
      icon: 'none'
    });
  }
};
const pickdate = ref<number>(Date.now());
const changeDate = ({ value }) => {
  // 转换为Date对象
  const dateObj = new Date(value);

  // 转换为不同的日期格式
  const isoString = dateObj.toISOString().split('T')[0]; // ISO格式，如：2025-07-17
  // 根据需要选择合适的格式赋值
  form.value.deliveryDate = isoString; // 或者使用 dateString 或 customFormat
}
const taskForm = ref<Record<string, any>>({
  taskId: undefined,
  message: "同意",
  assigneeMap: {},
  variables: {},
  messageType: ['1'],
  flowCopyList: []
});
const backForm = ref<Record<string, any>>({
  taskId: undefined,
  nodeCode: undefined,
  message: undefined,
  variables: {},
  messageType: ['1']
});
//任务
const task = ref<FlowTaskVO>({
  id: undefined,
  createTime: undefined,
  updateTime: undefined,
  tenantId: undefined,
  definitionId: undefined,
  instanceId: undefined,
  flowName: undefined,
  businessId: undefined,
  nodeCode: undefined,
  nodeName: undefined,
  flowCode: undefined,
  flowStatus: undefined,
  formCustom: undefined,
  formPath: undefined,
  nodeType: undefined,
  nodeRatio: undefined,
  applyNode: false,
  buttonList: []
});
const taskNodeList = ref([]);
const show = ref(false);
const backshow = ref(false);
const backloading = ref(false);
const approvalloading = ref(false);
const columns = ref<Array<Record<string, any>>>([])
const flowCode = ref<string>('');
const submitFormData = ref<StartProcessBo>({
  businessId: '',
  flowCode: '',
  variables: {}
});
const state = reactive({
    columns: [
        {name: 'materialName', title: '物料名称'},
        {name: 'specModel', title: '规格型号'},
        {name: 'unit', title: '单位'},
        {name: 'quantity', title: '数量'},
        {name: 'brandTech', title: '品牌'},
        {name: 'accessory', title: '随机备件'},
        {name: 'confirmItems', title: '确认事项'},
        {name: 'materialDirection', title: '物料去向(入库或xx工厂xx车间)'},
        {name: 'remark', title: '备注'},
    ],
    rows:<any[]> []
})
const tableEditShow = ref(false);
const confirmItems = ref<Record<string, any>>([
  { label: '外观合格', value: '外观合格' },
  { label: '产品合格证', value: '产品合格证' },
  { label: '说明书', value: '说明书' }
]);
const tableEdit = ref<any>([])
const tableEditIndex = ref(0);
const confirmEdit = () => { 
  state.rows[tableEditIndex.value] = tableEdit.value;
  tableEditShow.value = false;
};
const tapToolbar = () => {
    if(routeParams.value.type !== 'add') {
    return;
  }
  state.rows.push(
    {
      materialName: '无',
      specModel: '无',
      unit: '0',
      quantity: 0,
      brandTech: '无',
      accessory: '0',
      confirmItems: ['外观合格'],
      materialDirection: '0',
      remark: '无'
    }
  )

};
const tapOper = (type: any) => {
    if(routeParams.value.type !== 'add') {
    return;
  }
  if (type.type === 'edit') {
    tableEdit.value = type.data;
    tableEditIndex.value = type.index;
    tableEditShow.value = true;
  }
  if (type.type === 'remove') {
    console.log("type");
    state.rows.splice(type.index,1);
  }
};

const userStore = useUserStore();
const loading = ref(true);

const routeParams = ref<Record<string, any>>({ type: 'add' });


const taskVariables = ref<Record<string, any>>({});

const initFormData: ArrivalAcceptanceForm = {
  id: undefined,
  applyDate: undefined,
  applicant: undefined,
  employeeid: undefined,
  contractname: undefined,
  contractnumber: undefined,
  suppliername: undefined,
  deliveryDate: undefined,
  warranty: undefined,
  status: undefined,
  daohuomaterials: [],
  acceptanceOpinion: '合格',
  conclusion: undefined,
  acceptanceEngineer: undefined,
  designManager: undefined,
  viceManager: undefined
};
const data = reactive<PageData<ArrivalAcceptanceForm, any>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  rules: {
    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
    applicant: [{ required: true, message: '请填写申请人', trigger: 'blur' }],
    employeeid: [{ required: true, message: '请填写工号', trigger: 'blur' }],
    contractname: [{ required: true, message: '请填写合同名称', trigger: 'blur' }],
    contractnumber: [{ required: true, message: '请填写合同号', trigger: 'blur' }],
    suppliername: [{ required: true, message: '请填写供应商名称', trigger: 'blur' }],
    deliveryDate: [{ required: true, message: '请选择交货日期', trigger: 'blur' }],
    warranty: [{ required: true, message: '请填写质保要求', trigger: 'blur' }],
    acceptanceOpinion: [{ required: true, message: '请填写验收意见', trigger: 'blur' }],
    conclusion: [{ required: true, message: '请填写结论', trigger: 'blur' }]
  }
});
const { form, rules } = toRefs(data);
const formRef = ref<FormInstance>();
/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  form.value.applicant = userStore.nickname;
  form.value.employeeid = userStore.username;
  // 手动格式化日期为 YYYY/M/D 格式
  form.value.applyDate = getCurrentDateCN();
  form.value.daohuomaterials = [
    {
      materialName: '无',
      specModel: '无',
      unit: '0',
      quantity: 0,
      brandTech: '无',
      accessory: '0',
      confirmItems: ['外观合格'],
      materialDirection: '0',
      remark: '无'
    }
  ];
  state.rows = form.value.daohuomaterials;
};

/** 获取详情 */
const getInfo = () => {
  loading.value = true;
  nextTick(async () => {
    const res = await getArrivalAcceptance(routeParams.value.id);
    Object.assign(form.value, res.data);
    state.rows = form.value.daohuomaterials;
    loading.value = false;
  });
};
const submitForm = async (status: string) => {
  try {
    // 先显示用户选择弹窗并等待用户选择完成
    // const selectedUser = await showUserSelectAndWait();

    // // 如果用户取消选择，则停止执行
    // if (!selectedUser) {
    //   console.log('用户取消了选择');
    //   return;
    // }

    // 用户选择完成后，继续执行表单验证和提交
    formRef.value?.validate().then(async ({ valid, errors }: any) => {
    if (valid) {
      let res: AxiosResponse<ArrivalAcceptanceVO>;
      if (form.value.id) {
        res = await updateArrivalAcceptance(form.value);
      } else {
        res = await addArrivalAcceptance(form.value);
      }
      form.value = res.data;
      if (status === 'draft') {
        try {
          flowCode.value = 'arrivalAcceptance';
          submitFormData.value.flowCode = flowCode.value;
          submitFormData.value.businessId = form.value.id;
          //流程变量
          await startWorkFlow(submitFormData.value);
        } finally {
        }
        uni.navigateBack();
      } else {
        if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
          flowCode.value = 'arrivalAcceptance';
          form.value.daohuomaterials = state.rows;
          handleStartWorkFlow(form.value);
          return;
        }
        if (flowCode.value === '' || flowCode.value === null) {
          flowCode.value = 'xx';
        }
        await handleStartWorkFlow(res.data);
      }
      }
    });
  } catch (error) {
    userselectsinglevisable.value = false;
    console.error('用户选择或表单提交失败:', error);
    // 可以在这里添加错误提示
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    });
  }
};
const handleStartWorkFlow = async (data: ArrivalAcceptanceVO) => {
  try {
    submitFormData.value.flowCode = flowCode.value;
    submitFormData.value.businessId = data.id;
    taskVariables.value = {}
    submitFormData.value.variables = taskVariables.value;
    const resp = await startWorkFlow(submitFormData.value);
    taskForm.value.taskId = resp.data.taskId;
    taskForm.value.taskVariables = taskVariables;
  } finally {
    await completeTask(taskForm.value);
    uni.navigateBack();
  }
};
const handleApproval = async () =>{
  if (form.value.id) {
    form.value.daohuomaterials = state.rows;
    await updateArrivalAcceptance(form.value);
  }
  show.value = true;
  approvalloading.value = true;
  taskVariables.value = {};
  taskForm.value.taskVariables = taskVariables;
  taskForm.value.taskId = routeParams.value.taskId;
  taskForm.value.variables = taskVariables.value;
  approvalloading.value = false;
}
const backFlow = async () => {
  backshow.value = false;
  backloading.value = false;
  const response =  await getTask(routeParams.value.taskId);
  task.value = response.data;
  const data = await getBackTaskNode(task.value.definitionId, task.value.nodeCode);
  taskNodeList.value = data.data;
  backloading.value = false;
  columns.value = [];
  for (let i = 0; i < taskNodeList.value.length; i++) {
    columns.value.push({
      label: taskNodeList.value[i].nodeName,
      value: taskNodeList.value[i].nodeCode,
    });
  }
  backForm.value.taskId = routeParams.value.taskId;
  backForm.value.nodeCode = taskNodeList.value[0].nodeCode;
  backloading.value = true;
  backshow.value = true;
};
const handleBackConfirm = ({value}) => {
  backForm.value.nodeCode = value;
  console.log(backForm.value.nodeCode);
}
const backConfirm = async () => {
  console.log('backForm.value',backForm);
  await backProcess(backForm.value).finally(() => {
    backloading.value = false;
  });
  backshow.value = false;
  uni.navigateBack();
};
const confirm =  async () =>{
  show.value = false;
  await completeTask(taskForm.value);
  uni.navigateBack();
}

onLoad((options) => {
  routeParams.value = options || {};
});

onMounted(() => {
  nextTick(async () => {
    reset();
    loading.value = false;
    if (routeParams.value && (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval' || routeParams.value.type === 'finish')) {
      getInfo();
    }
  });
});

</script>


<style lang="scss" scoped>

.page-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #f5f5f5 100%);
  padding: 20rpx;
}

.form-header-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  color: white;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.header-top {
  margin-bottom: 30rpx;
}

.company-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20rpx;
}

.company-name {
  font-size: 32rpx;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  flex: 1;
  min-width: 300rpx;
}

.doc-number {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.header-bottom {
  padding-top: 0rpx;
}

.apply-date {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15rpx;
}

.form-title {
  font-size: 42rpx;
  font-weight: 700;
  text-align: center;
  color: white;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.form-content-card {
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 20rpx;
  overflow: hidden;
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin: 40rpx 0 25rpx 0;
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-radius: 16rpx;
  border-left: 6rpx solid #667eea;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6rpx;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 3rpx;
  }
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 20rpx;

  .wd-button {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    font-size: 30rpx;
    font-weight: 600;

    &[type="primary"] {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
    }

    &:not([type="primary"]) {
      background: #f8f9fa;
      color: #666666;
      border: 2rpx solid #e9ecef;
    }
  }
}

:deep(.wd-card) {
  .wd-card__body {
    padding: 40rpx;
  }
}

:deep(.wd-cell-group) {
  margin-bottom: 25rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

  .wd-cell {
    background: #fafbfc;
    border-bottom: 1rpx solid #f0f1f2;

    &:last-child {
      border-bottom: none;
    }
  }
}

:deep(.wd-input) {
  .wd-input__inner {
    background: transparent;
    font-size: 28rpx;
  }
}

:deep(.wd-textarea) {
  .wd-textarea__inner {
    background: transparent;
    font-size: 28rpx;
  }
}

:deep(.wd-radio-group) {
  .wd-cell {
    background: #fafbfc;
  }

  .wd-radio {
    margin-right: 30rpx;
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .page-container {
    padding: 15rpx;
  }

  .form-header-card {
    padding: 30rpx 25rpx;
    border-radius: 16rpx;
  }

  .company-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 15rpx;
  }

  .company-name {
    font-size: 28rpx;
    min-width: auto;
  }

  .doc-number {
    font-size: 22rpx;
    align-self: flex-end;
  }

  .form-title {
    font-size: 36rpx;
  }

  .section-title {
    font-size: 28rpx;
    padding: 15rpx 20rpx;
    margin: 30rpx 0 20rpx 0;
  }

  .action-buttons {
    padding: 20rpx;
    flex-direction: column;

    .wd-button {
      height: 80rpx;
      font-size: 28rpx;
    }
  }

  :deep(.wd-card) {
    .wd-card__body {
      padding: 30rpx 25rpx;
    }
  }

  :deep(.wd-cell-group) {
    margin-bottom: 20rpx;
    border-radius: 12rpx;
  }
}

/* 动画效果 */
.form-header-card {
  animation: slideInDown 0.6s ease-out;
}

.form-content-card {
  animation: slideInUp 0.6s ease-out 0.2s both;
}

.action-buttons {
  animation: slideInUp 0.6s ease-out 0.4s both;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 弹窗容器样式 */
.popup-container {
  border-radius: 32rpx 32rpx 0 0;
  z-index: 9999 !important; /* 确保弹窗在按钮上方 */
}

/* 弹窗内容 */
.popup-content {
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 0;
  max-height: 70vh; /* 限制最大高度 */
}

/* 弹窗头部 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 40rpx 32rpx;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.popup-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  text-align: center;
}

.close-icon {
  position: absolute;
  right: 40rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
}

/* 弹窗主体 */
.popup-body {
  padding: 40rpx;
}

.opinion-input {
  width: 100%;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 1px solid #e9ecef;
  font-size: 28rpx;
}

/* 弹窗底部 */
.popup-footer {
  display: flex;
  gap: 24rpx;
  padding: 32rpx 40rpx 40rpx;
  background: #fff;
  justify-content: space-between; /* 两端对齐：取消在左，提交在右 */
}

.cancel-btn {
  min-width: 160rpx;
  background: #f8f9fa !important;
  color: #666 !important;
  border: 1px solid #e9ecef !important;
}

.submit-btn {
  min-width: 160rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

/* 操作按钮区域 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 30%);
  backdrop-filter: blur(20rpx);
  padding: 40rpx 32rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  display: flex;
  gap: 24rpx;
  z-index: 998; /* 降低z-index，确保选择器弹窗能显示在按钮上方 */
  border-top: 1px solid rgba(0,0,0,0.06);
  /* 添加过渡动画 */
  transition: transform 0.3s ease;
}

/* 可选：隐藏按钮的样式（如果需要动态显示/隐藏） */
.action-buttons.hidden {
  transform: translateY(100%);
}

/* 自定义按钮基础样式 */
.custom-button {
  z-index: 998;
  flex: 1;
  height: 100rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

/* 按钮内容 */
.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  z-index: 2;
  position: relative;
}

.button-icon {
  font-size: 28rpx;
  line-height: 1;
}

.button-text {
  font-size: 30rpx;
  font-weight: 600;
  letter-spacing: 1rpx;
}

/* 提交申请按钮 */
.submit-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 10rpx 25rpx rgba(99, 102, 241, 0.3);
  color: #fff;
}

.submit-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 5rpx 15rpx rgba(99, 102, 241, 0.4);
}

/* 审批按钮 */
.approval-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 10rpx 25rpx rgba(16, 185, 129, 0.3);
  color: #fff;
}

.approval-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 5rpx 15rpx rgba(16, 185, 129, 0.4);
}

/* 按钮悬停效果 */
.submit-btn:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 15rpx 35rpx rgba(99, 102, 241, 0.4);
}

.approval-btn:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 15rpx 35rpx rgba(16, 185, 129, 0.4);
}

/* 按钮光泽效果 */
.custom-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
  z-index: 1;
}

.custom-button:active::before {
  left: 100%;
}

/* 按钮文字阴影 */
.submit-btn .button-text,
.approval-btn .button-text {
  text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.1);
}

/* 页面内容底部间距 - 避免被固定按钮遮挡 */
.page-container {
  padding-bottom: 240rpx;
}

.form-content-card {
  margin-bottom: 40rpx;
}

/* 确保最后的表单项有足够间距 */
.form-content-card:last-of-type {
  margin-bottom: 80rpx;
}

/* 表单行间距 */
.wd-row {
  margin-bottom: 32rpx;
}

.wd-row:last-child {
  margin-bottom: 0;
}

:deep(.wd-select-picker) {
  .wd-popup {
    z-index: 10001 !important;
    position: fixed !important;
    top: 50vh !important;          /* 使用vh单位，相对于视口高度 */
    left: 0 !important;            /* 左边对齐屏幕边缘 */
    right: 0 !important;           /* 右边对齐屏幕边缘 */
    bottom: auto !important;
    transform: translateY(-50%) !important;  /* 只垂直居中 */
    width: 95vw !important;       /* 宽度占满整个屏幕 */
    max-width: none !important;    /* 取消最大宽度限制 */
    border-radius: 0 !important;   /* 取消圆角，贴合屏幕边缘 */
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2) !important;
  }

  .wd-popup__content {
    position: relative !important;
    border-radius: 0 !important;   /* 取消圆角 */
    overflow: hidden !important;
    max-height: 70vh !important;   /* 最大高度相对于视口 */
    overflow-y: auto !important;
  }
}

/* 全局弹窗样式修复 - 宽度占满屏幕 */
:deep(.wd-popup) {
  &[data-position="center"] {
    position: fixed !important;
    top: 50vh !important;          /* 视口高度的50% */
    left: 0 !important;            /* 左边对齐屏幕边缘 */
    right: 0 !important;           /* 右边对齐屏幕边缘 */
    bottom: auto !important;
    transform: translateY(-50%) !important;  /* 只垂直居中 */
    z-index: 10001 !important;
    width: 100vw !important;       /* 宽度占满整个屏幕 */
    max-width: none !important;    /* 取消最大宽度限制 */
    border-radius: 0 !important;   /* 取消圆角 */
  }
}
:deep(.wd-calendar){
  .wd-popup {
    z-index: 10002 !important;
    position: fixed !important;
    top: 50vh !important;          /* 使用vh单位，相对于视口高度 */
    left: 5vw !important;            /* 左边对齐屏幕边缘 */
    right: 5vw !important;           /* 右边对齐屏幕边缘 */
    bottom: auto !important;
    transform: translateY(-50%) !important;  /* 只垂直居中 */
    width: 80vw !important;       /* 宽度占满整个屏幕 */
    max-width: none !important;    /* 取消最大宽度限制 */
    border-radius: 0 !important;   /* 取消圆角，贴合屏幕边缘 */
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2) !important;
  }

  .wd-popup__content {
    position: relative !important;
    border-radius: 0 !important;   /* 取消圆角 */
    overflow: hidden !important;
    max-height: 70vh !important;   /* 最大高度相对于视口 */
    overflow-y: auto !important;
  }
}

/* 确保驳回弹窗中的选择器显示正确 */
:deep(.popup-container .wd-select-picker) {
  .wd-popup {
    z-index: 10002 !important;
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .action-buttons {
    padding: 32rpx 24rpx;
  }

  .custom-button {
    height: 88rpx;
  }

  .button-text {
    font-size: 28rpx;
  }
}

/* 页面内容底部留白，避免被固定按钮遮挡 */
.page-content {
  padding-bottom: 200rpx;
}

/* 美化表单样式 */
.form-container {
  padding: 40rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}
.approval-record-buttons{
  position: fixed;
  right: 20rpx;
  bottom: 80rpx;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
  z-index: 999;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
  }
}
.approval-record-buttons .button-text-top {
  font-size: 30rpx;
  color: #fff;
  font-weight: 500; 
  line-height: 1;
  margin-bottom: 2rpx;
}
/* 审批记录按钮样式 */
.approval-record-button {
  position: fixed;
  right: 20rpx;
  bottom: 280rpx;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
  z-index: 999;
  transition: all 0.3s ease;
  cursor: pointer;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
  }
}

.approval-record-button .button-text-top {
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 2rpx;
}

.approval-record-button .button-text-bottom {
  font-size: 20rpx;
  color: #fff;
  font-weight: 500;
  line-height: 1;
}

@media screen and (max-width: 750rpx) {
  .approval-record-button {
    right: 15rpx;
    bottom: 260rpx;
    width: 70rpx;
    height: 70rpx;
  }

  .approval-record-button .button-text-top,
  .approval-record-button .button-text-bottom {
    font-size: 18rpx;
  }
}
</style>